<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on基础</title>
</head>
<body>
    <div id="app">
        <button v-on:click="doIt">v-on指令</button>
        <button @click="doIt">v-on简化</button>
        <button @dblclick="doIt">v-on双击</button>
        <h2 @click="changeFood">{{food}}</h2>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
        var app = new Vue({
            el: '#app',
            data: {
                food: '西红柿炒蛋'
            },
            methods: {
                doIt: function() {
                    alert("hello")
                },
                changeFood: function() {
                    this.food+="好好吃！"
                }
            },
        });
</script>
</html>